<template>
  <div>
    <div class="gl_contentBox" style="margin-bottom:20px">
      <div class="navTop">
        <!-- <div class="left">
          <img class="photo" src="getStaticFileUrl()" alt="">
        </div> -->
        <div class="right">
          <p style="font-size:20px;margin-bottom:14px">{{ role.name }}</p>
          <div>
            <span style="font-size:14px;color:rgba(0,0,0,0.75)">关联课程:
              <el-tag v-for="(item,index) in role.courses" :key="index" style="margin-right:15px;margin-bottom:10px">
                {{ item.name }}
              </el-tag>
            </span>
            <span style="font-size:14px;color:rgba(25,144,255,1);margin-left:32px">人数/上限:</span> <span style="font-size:14px;color:rgba(25,144,255,1);margin-right:32px">{{ role.studentCount }}/{{ role.maxStudentCount }}人</span>
          </div>
        </div>
      </div>
    </div>
    <div class="gl_contentBox">
      <el-tabs v-model="activeTab" class="gl_tabs" type="card" @tab-click="tabClick">
        <el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.name">
          <component :is="item.component" v-if="activeTab === item.name" :active-tab="activeTab" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { api_GET_ClubClassId } from '@/extend/api/hallswaggerApi/app.js';
import { Api_GET_ClubClassIdQO } from '@/lib/form/hall/swaggerForm';
import ArrangingList from './arrangingList.vue';
import StudentList from './studentList.vue';
// import SignList from '@/viewsHall/grade/arranging/sign/signType.vue';
import SignList from './sign/SigninList.vue';
export default {
  data() {
    return {
      Api_GET_ClubClassIdQO: new Api_GET_ClubClassIdQO(),
      role: {},
      activeTab: this.$route.query.name || 'ArrangingList',
      storeId: '',
      tabList: [
        {
          label: '排课信息',
          name: 'ArrangingList',
          productStatus: 'ArrangingList',
          component: ArrangingList
        },
        {
          label: '班级学员',
          name: 'StudentList',
          productStatus: 'StudentList',
          component: StudentList
        },
        {
          label: '签到情况',
          name: 'SignList',
          productStatus: 'SignList',
          component: SignList
        }
      ]
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.Api_GET_ClubClassIdQO.IncludeClassStudentCount = true;
      this.Api_GET_ClubClassIdQO.IncludeCourse = true;
      api_GET_ClubClassId(this.$route.query.id, this.Api_GET_ClubClassIdQO).then(res => {
        console.log(res);
        this.role = res;
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    tabClick() {
      this.$router.push({ query: { 'name': this.activeTab, id: this.$route.query.id }});
    }
  }

};
</script>

<style  lang="scss" scoped>
.navTop {
  display: flex;
  align-items: center;
}
.photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin-right: 24px;
}
</style>
